{% extends "base.html" %}

{% block title %}师生关系管理 - 乒乓球培训管理系统{% endblock %}

{% block page_title %}师生关系管理{% endblock %}

{% block extra_css %}
<style>
    .filter-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .relation-status {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .status-approved {
        background-color: #d1edff;
        color: #0c5460;
        border: 1px solid #b8daff;
    }

    .status-rejected {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .relation-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        background: white;
        transition: all 0.2s ease;
    }

    .relation-card:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0,123,255,0.1);
    }

    .relation-meta {
        font-size: 0.9em;
        color: #6c757d;
    }

    .action-btn {
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 4px;
    }

    .bulk-actions {
        background: #e9ecef;
        padding: 10px;
        border-radius: 6px;
        margin-bottom: 20px;
        display: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面头部操作区 -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="d-flex align-items-center">
                <h4 class="mb-0 me-3">师生关系管理</h4>
                <span class="badge bg-primary">共 {{ pagination.total if pagination else 0 }} 条记录</span>
            </div>
        </div>
        <div class="col-md-4 text-end">
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-card">
        <form method="GET" id="filterForm">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">校区</label>
                    <select name="campus_id" class="form-select">
                        <option value="">全部校区</option>
                        {% for campus in campuses %}
                        <option value="{{ campus.id }}"
                                {% if filter_params.campus_id == campus.id %}selected{% endif %}>
                            {{ campus.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">状态</label>
                    <select name="status" class="form-select">
                        <option value="">全部状态</option>
                        <option value="pending" {% if filter_params.status == 'pending' %}selected{% endif %}>
                            待审核
                        </option>
                        <option value="approved" {% if filter_params.status == 'approved' %}selected{% endif %}>
                            已同意
                        </option>
                        <option value="rejected" {% if filter_params.status == 'rejected' %}selected{% endif %}>
                            已拒绝
                        </option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">开始日期</label>
                    <input type="date" name="start_date" class="form-control"
                           value="{{ filter_params.start_date }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">结束日期</label>
                    <input type="date" name="end_date" class="form-control"
                           value="{{ filter_params.end_date }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">关键词</label>
                    <input type="text" name="keyword" class="form-control"
                           placeholder="姓名/手机" value="{{ filter_params.keyword }}">
                </div>
                <div class="col-md-1">
                    <label class="form-label">&nbsp;</label>
                    <div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 批量操作区 -->
    <div class="bulk-actions" id="bulkActions">
        <div class="d-flex align-items-center">
            <span class="me-3">已选择 <span id="selectedCount">0</span> 条记录</span>
            <button type="button" class="btn btn-secondary btn-sm" onclick="clearSelection()">
                <i class="bi bi-x"></i> 取消选择
            </button>
        </div>
    </div>

    <!-- 关系列表 -->
    <div class="row">
        {% if relations %}
            <div class="col-12">
                <!-- 表头选择 -->
                <div class="relation-card" style="background: #f8f9fa;">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="selectAll"
                               onchange="toggleSelectAll()">
                        <label class="form-check-label fw-bold" for="selectAll">
                            全选 / 取消全选
                        </label>
                    </div>
                </div>

                {% for relation in relations %}
                <div class="relation-card">
                    <div class="row align-items-center">
                        <div class="col-md-1">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input relation-checkbox"
                                       value="{{ relation.id }}" onchange="updateSelection()">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="fw-bold">{{ relation.student.real_name }}</div>
                            <div class="relation-meta">学员 · {{ relation.student.phone }}</div>
                        </div>
                        <div class="col-md-2">
                            <div class="fw-bold">{{ relation.coach.real_name }}</div>
                            <div class="relation-meta">教练 · {{ relation.coach.phone }}</div>
                        </div>
                        <div class="col-md-2">
                            <div>{{ relation.student.campus.name }}</div>
                            <div class="relation-meta">
                                {% if relation.student.campus.id != relation.coach.campus_id %}
                                    <span class="text-warning">
                                        <i class="bi bi-exclamation-triangle"></i>
                                        跨校区关系
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <span class="relation-status status-{{ relation.status }}">
                                {% if relation.status == 'pending' %}待审核
                                {% elif relation.status == 'approved' %}已同意
                                {% elif relation.status == 'rejected' %}已拒绝
                                {% endif %}
                            </span>
                            <div class="relation-meta">
                                {{ relation.applied_at.strftime('%Y-%m-%d') }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            {% if relation.apply_note %}
                                <div class="text-truncate" style="max-width: 150px;"
                                     title="{{ relation.apply_note }}">
                                    {{ relation.apply_note }}
                                </div>
                            {% else %}
                                <span class="text-muted">无说明</span>
                            {% endif %}
                        </div>
                        <div class="col-md-1">
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-primary dropdown-toggle"
                                        type="button" data-bs-toggle="dropdown">
                                    操作
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item"
                                           href="{{ url_for('relations.detail', relation_id=relation.id) }}">
                                            <i class="bi bi-eye"></i> 查看详情
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <a class="dropdown-item"
                                           href="{{ url_for('students.detail', id=relation.student_id) }}">
                                            <i class="bi bi-person"></i> 学员详情
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item"
                                           href="{{ url_for('coaches.detail', id=relation.coach_id) }}">
                                            <i class="bi bi-person-check"></i> 教练详情
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}

                <!-- 分页 -->
                {% if pagination and pagination.pages > 1 %}
                <nav aria-label="分页导航" class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if pagination.has_prev %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('relations.index', page=pagination.prev_num, **filter_params) }}">
                                上一页
                            </a>
                        </li>
                        {% endif %}

                        {% for page_num in pagination.iter_pages() %}
                            {% if page_num %}
                                {% if page_num != pagination.page %}
                                <li class="page-item">
                                    <a class="page-link" href="{{ url_for('relations.index', page=page_num, **filter_params) }}">
                                        {{ page_num }}
                                    </a>
                                </li>
                                {% else %}
                                <li class="page-item active">
                                    <span class="page-link">{{ page_num }}</span>
                                </li>
                                {% endif %}
                            {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                            {% endif %}
                        {% endfor %}

                        {% if pagination.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('relations.index', page=pagination.next_num, **filter_params) }}">
                                下一页
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                    <div class="text-center text-muted mt-2">
                        显示第 {{ pagination.per_page * (pagination.page - 1) + 1 }} -
                        {{ pagination.per_page * pagination.page if pagination.page < pagination.pages else pagination.total }} 条，
                        共 {{ pagination.total }} 条记录
                    </div>
                </nav>
                {% endif %}
            </div>
        {% else %}
            <div class="col-12 text-center py-5">
                <div class="text-muted">
                    <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                    <h5 class="mt-3">暂无师生关系记录</h5>
                    <p>当前筛选条件下没有找到相关记录</p>
                    <button type="button" class="btn btn-outline-primary" onclick="clearFilters()">
                        清除筛选条件
                    </button>
                </div>
            </div>
        {% endif %}
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// 全选/取消全选
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.relation-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });

    updateSelection();
}

// 更新选择状态
function updateSelection() {
    const checkboxes = document.querySelectorAll('.relation-checkbox');
    const checkedBoxes = document.querySelectorAll('.relation-checkbox:checked');
    const selectAll = document.getElementById('selectAll');
    const bulkActions = document.getElementById('bulkActions');
    const selectedCount = document.getElementById('selectedCount');

    // 更新全选状态
    if (checkedBoxes.length === checkboxes.length && checkboxes.length > 0) {
        selectAll.checked = true;
        selectAll.indeterminate = false;
    } else if (checkedBoxes.length > 0) {
        selectAll.checked = false;
        selectAll.indeterminate = true;
    } else {
        selectAll.checked = false;
        selectAll.indeterminate = false;
    }

    // 显示/隐藏批量操作
    if (checkedBoxes.length > 0) {
        bulkActions.style.display = 'block';
        selectedCount.textContent = checkedBoxes.length;
    } else {
        bulkActions.style.display = 'none';
    }
}

// 清除选择
function clearSelection() {
    const checkboxes = document.querySelectorAll('.relation-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    updateSelection();
}




// 清除筛选条件
function clearFilters() {
    window.location.href = '/relations/';
}

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', function() {
    // 设置日期筛选的默认值
    const today = new Date().toISOString().split('T')[0];
    const startDateInput = document.querySelector('input[name="start_date"]');
    const endDateInput = document.querySelector('input[name="end_date"]');

    if (!startDateInput.value) {
        const thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
        startDateInput.value = thirtyDaysAgo.toISOString().split('T')[0];
    }

    if (!endDateInput.value) {
        endDateInput.value = today;
    }
});
</script>
{% endblock %}